<template>
  <!-- 固定的header -->
  <transition name="el-fade-in">
    <div class="layout-header fixed" v-show="isFixed">
      <common-header />
    </div>
  </transition>

  <!-- 正常页面 -->
  <div class="layout-header">
    <common-header />
  </div>
  <div class="layout-main" :class="{ pt100: isFixed }">
    <router-view />
  </div>
  <div class="layout-footer"></div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CommonHeader from '@/components/CommonHeader.vue';

  // 监听滚动条事件使header固定在最上面
  const isFixed = ref(false);
  const handleScroll = () => {
    let scrollTop: number = document.body.scrollTop || document.documentElement.scrollTop;
    isFixed.value = scrollTop > 300;
  };
  window.addEventListener('scroll', handleScroll, true);
</script>

<style lang="scss" scoped>
  >>> .el-menu--horizontal {
    border: none !important;
  }
  .layout-header {
    height: $headerHeight;
    background: #333;
    padding: 10px 20px 0 20px;
    &.fixed {
      position: fixed;
      top: 0;
      left: 0;
      height: $headerHeight;
      width: calc(100% - 40px); // 减去padding-left和padding-right
      box-shadow: 0 0 20px #333;
    }
  }

  .layout-footer {
    height: $footerHeight;
    background: #333;
  }

  .layout-main {
    min-height: calc(100% - $headerHeight - $footerHeight - 10px); // 10px 为 header 的padding
    background: #f6f6f6;
  }

  .pt100 {
    padding-top: $headerHeight;
  }
</style>
